<template>
    <div class="preview-component-edit-container">
        <van-icon class="preview-component-icon" @click="delElement" name="delete" />
        <van-icon class="preview-component-icon" @click="settingClick" name="setting-o" />
    </div>
</template>

<style scoped>
    div.preview-component-edit-container{
        position: absolute;
        right: 0;
        z-index: 1001;
    }

    .preview-component-icon{
        float: right;
        font-size: 16px;
        border: 1px solid #888383;
        border-collapse:collapse;
        padding: 2px;
        margin-left: -1px;
    }
</style>

<script>
    export default {
        props:{
            item: Object
        },
        methods:{
            settingClick() {
                this.$store.commit('setSelectedComponent', {
                    config: this.item.config,
                    data: this.item.data,
                });
                this.$store.commit('setComponentActiveTab', 0)
            },
            delElement(){
                this.$store.commit('delElement', this.item.data.id)
            }
        }
    }
</script>